<template>
    <div class="index">
        <Header></Header>
        <div class="main">
            <p class="current-nav">
                当前位置 :
                <router-link to="index">首页</router-link>
                <i>></i>
                <a>应急预案备案</a>
                <i>></i>备案申请
            </p>
            <div class="infor application" style="margin-bottom:0;">
                <!-- <p class="title">备案申请</p> -->
                <ul class="clearfix steps">
                    <li class="steps-active" @click="goToPage(0)">
                        <span>1</span>
                        <p>备案材料</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span
                                >请先<strong>导出</strong>所需备案材料，便于备案申请时提交</span
                            >
                        </p>
                    </li>
                    <li class="steps-active" @click="goToPage(1)">
                        <span>2</span>
                        <p>备案申请</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span
                                >将备案申请表填好后，<strong>保存</strong>并<strong>导出</strong>，进行线下备案，线上备案正在开发中</span
                            >
                        </p>
                    </li>
                    <!-- <li @click="goToPage(2)">
                        <span>3</span>
                        <p>备案信息查询</p>
                        <p class="info_note clearfix">
                            <i class="el-icon-warning-outline"></i>
                            <span>线上备案5个工作日后，可查看备案结果</span>
                        </p>
                    </li> -->
                </ul>
                <div class="form-container">
                    <h2 class="filing_tit">
                        生产经营单位生产安全事故应急预案备案申请表
                    </h2>
                    <div class="bts clearfix">
                        <el-button
                            type="primary"
                            plain
                            class="detail-btn"
                            @click="uploadDetail('ruleForm')"
                            ><i class="el-icon-upload2">导出</i></el-button
                        >
                        <!-- <el-button @click="submitForm('ruleForm',1)" class="gray" style="float:right;">发送</el-button> -->
                        <el-button
                            @click="submitForm('ruleForm', 0)"
                            class="sure"
                            style="float:right;"
                            >保存</el-button
                        >
                    </div>
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        label-width="145px"
                        class="demo-ruleForm"
                    >
                        <el-row>
                            <el-col :span="12">
                                <el-form-item
                                    label="申请单位 :"
                                    prop="companyName"
                                >
                                    <el-input
                                        v-model="ruleForm.companyName"
                                        disabled
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="法定代表人 :"
                                    prop="legalPerson"
                                >
                                    <el-input
                                        disabled
                                        v-model="ruleForm.legalPerson"
                                        maxlength="20"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="联系人 :" prop="contacter">
                                    <el-input
                                        v-model="ruleForm.contacter"
                                        maxlength="20"
                                        disabled
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="联系电话 :"
                                    prop="contactInfo"
                                >
                                    <el-input
                                        v-model="ruleForm.contactInfo"
                                        maxlength="20"
                                        disabled
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="传真 :" prop="fax">
                                    <el-input
                                        v-model="ruleForm.fax"
                                        maxlength="20"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="行业类型 :"
                                    prop="businessName"
                                >
                                    <el-input
                                        v-model="ruleForm.businessName"
                                        disabled
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item
                                    label="资产总额 :"
                                    prop="totalAssets"
                                >
                                    <el-input
                                        v-model="ruleForm.totalAssets"
                                        style="width:80%;"
                                    ></el-input>
                                    <span class="fr">万元</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="从业人数 :"
                                    prop="peopleNumber"
                                >
                                    <el-input
                                        v-model="ruleForm.peopleNumber"
                                        style="width:90%;"
                                    ></el-input>
                                    <span class="fr">人</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="电子邮箱 :" prop="email">
                                    <el-input
                                        disabled
                                        v-model="ruleForm.email"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    label="邮政编码 :"
                                    prop="postCode"
                                >
                                    <el-input
                                        v-model="ruleForm.postCode"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="单位地址 :" prop="address">
                                    <el-input
                                        v-model="ruleForm.address"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item
                                    label="待备案预案名称 :"
                                    prop="applyPlanName"
                                >
                                    <el-input
                                        type="textarea"
                                        v-model="ruleForm.applyPlanName"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item
                                    label="( 单位盖章 ) 日期 :"
                                    prop="sealTime"
                                >
                                    <el-date-picker
                                        v-model="ruleForm.sealTime"
                                        type="date"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd"
                                        :picker-options="pickerOptions"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
        <Footer />
    </div>
</template>

<script>
import Header from "../common/header";
import Footer from "../common/footer";

export default {
    components: {
        Header,
        Footer
    },
    data () {
        return {
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
                }
            },
            businessId: '',
            ruleForm: {
                companyId: "", //单位id
                companyName: "", //单位名称
                legalPerson: "", //法定代表人
                contacter: "", //联系人
                contactInfo: "", //联系电话
                fax: "",//传真
                businessName: '',//行业类型
                totalAssets: '',//资产总额
                peopleNumber: '',//从业人数
                email: '',//电子邮箱
                postCode: '',//邮政编码
                address: '',//单位地址
                applyPlanName: '',//待备案预案名称
                sealTime: '',//单位盖章日期
            },
            rules: {
                companyName: [
                    {
                        required: true,
                        message: "请输入申请单位",
                        trigger: "blur"
                    }
                ],
                legalPerson: [
                    {
                        required: true,
                        message: "请输入法定代表人",
                        trigger: "blur"
                    }
                ],
                contacter: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur"
                    }
                ],
                contactInfo: [
                    {
                        required: true,
                        message: "请输入联系电话",
                        trigger: "blur"
                    }
                ],
                fax: [
                    {
                        required: true,
                        message: "请填写传真号码",
                        trigger: "blur"
                    }
                ],
                businessName: [
                    {
                        required: true,
                        message: "",
                        trigger: "blur"
                    }
                ],
                totalAssets: [
                    {
                        required: true,
                        message: "请填写资产总额",
                        trigger: "blur"
                    }
                ],
                peopleNumber: [
                    {
                        required: true,
                        message: "请填写从业人数",
                        trigger: "blur"
                    }
                ],
                email: [
                    {
                        required: true,
                        message: "请输入电子邮箱",
                        trigger: "blur"
                    }
                ],
                postCode: [
                    {
                        required: true,
                        message: "请输入邮政编码",
                        trigger: "blur"
                    }
                ],
                address: [
                    {
                        required: true,
                        message: "请填写单位地址",
                        trigger: "blur"
                    }
                ],
                applyPlanName: [
                    {
                        required: true,
                        message: "请输入待备案预案名称",
                        trigger: "blur"
                    }
                ],
                sealTime: [
                    {
                        required: true,
                        message: "请选择盖章日期",
                        trigger: "blur"
                    }
                ]
            },
            varCode: "",
            changeList: false,
            navChildren: []
        };
    },
    created () {
        this.lookcompany()
        this.navChildren = JSON.parse(this.$route.query.navChildren)
    },
    methods: {
        goToPage (index) {
            this.$router.push({
                path: this.navChildren[index].menuUrl,
                query: {
                    navIndex: this.$route.query.navIndex,
                    navChildren: this.$route.query.navChildren
                }
            })
        },
        uploadDetail (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        companyId: JSON.parse(localStorage.getItem("user"))
                            .companyId,
                        businessId: localStorage.businessId,
                        companyName: this.ruleForm.companyName,
                        legalPerson: this.ruleForm.legalPerson,
                        contacter: this.ruleForm.contacter,
                        contactInfo: this.ruleForm.contactInfo,
                        fax: this.ruleForm.fax,
                        businessName: this.ruleForm.businessName,
                        totalAssets: this.ruleForm.totalAssets,
                        peopleNumber: this.ruleForm.peopleNumber,
                        email: this.ruleForm.email,
                        postCode: this.ruleForm.postCode,
                        address: this.ruleForm.address,
                        applyPlanName: this.ruleForm.applyPlanName,
                        sealTime: this.ruleForm.sealTime
                    };
                    this.$axios({
                        method: "post",
                        url: this.$baseUrl + "emergency/v1.0/plan/record/export",
                        data: params
                    }).then(res => {
                        let data = res.data.meta;
                        if (data.success) {
                            var timestamp = Date.parse(new Date());
                            var browserIsIe = this.browserIsIe();
                            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                            save_link.href = res.data.data
                            save_link.download = timestamp;
                            var event = document.createEvent('MouseEvents');
                            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                            save_link.dispatchEvent(event);
                            return false;
                        } else {
                            this.$message({
                                message: res.data.meta.msg,
                                type: "error"
                            });
                        }
                    });
                }
            })
        },
        browserIsIe () {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                return true;
            }
            else {
                return false;
            }
        },
        submitForm (formName, n) {
            // let sealTime = ;

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        companyId: JSON.parse(localStorage.getItem("user"))
                            .companyId,
                        companyName: this.ruleForm.companyName,
                        legalPerson: this.ruleForm.legalPerson,
                        contacter: this.ruleForm.contacter,
                        contactInfo: this.ruleForm.contactInfo,
                        fax: this.ruleForm.fax,
                        businessName: this.ruleForm.businessName,
                        totalAssets: this.ruleForm.totalAssets,
                        peopleNumber: this.ruleForm.peopleNumber,
                        email: this.ruleForm.email,
                        postCode: this.ruleForm.postCode,
                        address: this.ruleForm.address,
                        applyPlanName: this.ruleForm.applyPlanName,
                        sealTime: this.ruleForm.sealTime
                    };
                    this.$axios({
                        method: "post",
                        url: this.$baseUrl + "emergency/v1.0/plan/record/add",
                        data: params
                    }).then(res => {
                        let data = res.data.meta;
                        if (data.success) {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            // if (n == 1) {
                            //     this.$router.push({
                            //         path:"risk2",
                            //         query:{
                            //             navIndex:1
                            //         }
                            //     });
                            // }
                        } else {
                            this.$message({
                                message: res.data.meta.msg,
                                type: "error"
                            });
                        }
                    });
                    localStorage.setItem("ruleForm", "");
                }
            })
        },
        resetForm (formName) {
            this.$refs[formName].resetFields();
        },
        lookcompany () {
            this.$axios({
                method: "get",
                url: this.$baseUrl + "emergency/v1.0/plan/record/" + JSON.parse(localStorage.getItem("user")).companyId
            }).then(res => {
                let data = res.data.data;
                this.ruleForm = data;
            });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.application {
    padding-top: 40px;
    .form-container {
        width: 900px;
        padding: 50px 0 70px;
        margin: 0 auto;
        .filing_tit {
            text-align: center;
            font-weight: bold;
            font-size: 22px;
        }
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 100%;
        }
        .el-button {
            width: 136px;
            height: 42px;
        }
        .el-textarea {
            .el-textarea__inner {
                resize: none;
                height: 200px;
                border-radius: 8px;
            }
        }
        .el-select {
            .el-input {
                width: 176px;
            }
            margin-right: 20px;
        }
        .el-select:last-child {
            margin: 0;
        }
        .chose_btn {
            height: 36px;
            margin-bottom: 20px;
            position: relative;
            input:first-child {
                width: 424px;
                height: 42px;
                text-indent: 10px;
                border: 1px solid #dddddd;
                border-radius: 8px;
                color: #cccccc;
                float: left;
                margin-right: 12px;
            }
            input:first-child::placeholder {
                color: #cccccc;
            }
            p {
                position: absolute;
                top: 40px;
            }
            .select_btn {
                float: right;
                text-align: center;
                color: #7254e8;
                width: 86px;
                font-size: 12px;
                border: 1px solid #2476fe;
                height: 44px;
                overflow: hidden;
                border-radius: 8px;
                margin-right: 60px;
                input {
                    position: absolute;
                    top: 0;
                    left: 412px;
                }
            }
            .el-button {
                width: 86px;
                border: 0;
            }
        }
        .bts {
            width: 100%;
            .gray {
                background: #ccc;
                border: none;
                color: #fff;
            }
        }
    }
    .el-button.sure {
        color: #fff;
        width: 120px;
        height: 36px;
        background: #4080ff;
    }
    .el-button.sure:hover {
        opacity: 0.8;
    }
}
</style>

